<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>平台ip统计曲线</title>
    <#include "/header.html">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>
    <link rel="stylesheet" href="${request.contextPath}/statics/css/chartStyle.css">
    <script src="${request.contextPath}/statics/js/echarts.min.js"></script>
    <script src="${request.contextPath}/statics/js/transData.js"></script>
</head>
<style>
    .bootstrap-select{
        width: 100% !important;
    }
    .glyphicon-arrow-up{
        padding-left: 10px;
        color: red;
    }

    .glyphicon-arrow-down{
        padding-left: 10px;
        color: #76d471;
    }
    #tableData{
        margin: 20px 0;
    }
    #tableData td{
        text-align: center;
        /*max-width: 200px;*/
        /*min-width: 200px;*/
    }
    #tableData th{
        text-align: center;
        /*max-width: 200px;*/
        /*min-width: 200px;*/
    }
    .tableCon{
        width: 100%;
        overflow-x: auto;
    }
</style>
<body>
<div id="index">
    <div class="layui-container" style="width: 100%;">
        <div class="layui-row" style="margin-top: 10px;">
            <div class="layui-col-md2 ">
                <select class="selectpicker" id="platformId"  title="请选择平台名称"   style="width:100%;" >

                </select>
            </div>
            <div class="layui-col-md2" style="padding-left: 20px;">
                <input type="text" class="form-control" required  id="TimeDate"  placeholder="请输入查询日期"  autocomplete="off" >
            </div>

            <div class="layui-col-md3 " style="padding-left: 20px;">
                <div class="btn btn-default" id="search" onclick="platformIpCountPage.reload()">查询</div>
            </div>
        </div>
    </div>
    <div class="col-sm-12 select-info table-striped">
        <div class="tableCon">
           <table class="table table-bordered table-hover" id="tableData">
                <thead>
                <tr>
                    <th>去重后IP数</th>
                    <th>未去重IP数</th>
                    <th>PV数</th>
                    <th>去重后UV数</th>
                    <th>未去重UV数</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
        <div class="row chartsBox">
            <div class="col-md-12 chartCon">
                <div id="platIpCountChart" style="width: 100%;height:370px;margin: 40px auto;"></div>
            </div>
        </div>

    </div>

    <script>
        $(function () {
            platformIpCountPage.init();
        });
        var startTimes;
        var endTimes;
        var platformIpCountPage = {
            init:function () {
                var _this = this;
                _this.renderTime();
                _this.getPlatformList();
            },
            renderTime:function () {
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#TimeDate',
                    position: 'fixed',
                    change:function(value, date, endDate){

                    }
                });
                startTimes = this.getTime(0);
                $("#TimeDate").val(startTimes);
            },
            getTime:function (num) {
                var _thisdate =new Date() - (1000*60 *60 *24*num)
                var date = new Date(_thisdate);
                var seperator1 = "-";
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = year + seperator1 + month + seperator1 + strDate;
                return currentdate;
            },
            setParams:function () {
                if(!$('#TimeDate').val()){
                    layer.msg('时间格式不对')
                    return;
                }
                var params = {
                    endDate:$('#TimeDate').val(),
                    platformId:$('#platformId').val()
                };
                return params;
            },
            getPlatformList:function () {
                var _this = this;
                $.ajax({
                    type : "get",
                    url : baseURL+"platform/findAllPlatform",
                    dataType : "json",
                    success: function(data) {
                        if(data.code==0){
                            var _html;
                            for(var i=0;i<data.platformList.length;i++){
                                _html = _html + '<option value="'+data.platformList[i].nickName+'">'+data.platformList[i].nickName+'</option>'
                            }
                            $('#platformId').html(_html);
                            $('#platformId').selectpicker('refresh');
                            $('#platformId').val(data.platformList[0].nickName);
                            $('#platformId').selectpicker('refresh');
                            _this.getAllCountData();
                        }else{
                            layer.msg('数据获取失败');
                        }
                    },
                    error:function(){

                        layer.msg('数据获取失败');
                    }
                });
            },
            reload:function () {
                var allRequestParams = this.setParams();
                //console.log(allRequestParams);
                this.getAllCountData();
            },
            getAllCountData:function () {
                var  indexLoading = layer.load(2);
                var param = this.setParams();
                var _this = this;
                $.ajax({
                    type : "get",
                    url :  "https://ipreport.yifutangvip.net/ipRecord/getIpStatisticCountChart",
                    dataType : "json",
                    data:{
                        statisticTime:param.endDate,
                        platformId:param.platformId
                    },
                    success: function(data) {
                        if(data.code==0){
                               _this.transToChartsData(data.result.list);
                               _this.showAllCountDataTable(data.result.total);
                               layer.close(indexLoading);
                        }else{
                            layer.msg('数据获取失败');
                        }
                    },
                    error:function(){

                        layer.msg('数据获取失败');
                    }
                });
            },
            showAllCountDataTable:function (data) {
                var str = '<tr><td>'+data.todayIpNorepCountTotal+'</td><td>'+data.todayIpCountTotal+'</td><td>'+data.todayPvCountTotal+'</td><td>'+data.todayUvNorepCountTotal+'</td><td>'+data.todayUvCountTotal+'</td>';
                $("#tableData tbody").html(str);
            },
            transToChartsData:function (data) {
                var xAxis = [];
                var seriesArr = [];
                var nameArr = ['去重后IP数','未去重IP数','PV数','去重后UV数','未去重UV数'];
                var seriesData = [];
                for(var j=0;j<nameArr.length;j++){
                    seriesData.push([]);
                    seriesArr.push(
                        {
                            name:nameArr[j],
                            type:'line',
                            smooth: true,
                            data:seriesData[j]
                        }
                    )
                }
                for(var i=0;i<data.length;i++){
                        data[i].hour < 10 ? xAxis.push('0'+data[i].hour+' : 00') : xAxis.push(data[i].hour +' : 00');
                        seriesArr[0].data.push(data[i].ipCount);
                        seriesArr[1].data.push(data[i].ipNorepCount);
                        seriesArr[2].data.push(data[i].pvCount);
                        seriesArr[3].data.push(data[i].uvCount);
                        seriesArr[4].data.push(data[i].uvNorepCount);
               }
                //console.log(seriesArr);
                this.commonOption('platIpCountChart','平台IP统计曲线图',nameArr,seriesArr,xAxis,'IP数');
            },
            chartInt:function (id,title) {

                var _this = this;
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById(id));
                // console.log(myChart)
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: title
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985',
                                formatter:function (params) {
                                    return parseFloat(params.value).toFixed(0)
                                }
                            }
                        }
                    },
                    //color:['#2ec770','#1c97f5'],
                    legend: {
                        type: 'scroll',
                        //orient: 'vertical',
                        left: '10%',
                        right:'230px',
                        top:'40px'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top:'90px',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        name:'时间',
                        nameLocation:'start',
                        axisLabel: {
                            showMaxLabel: true
                        },
                        axisPointer:{
                            label:{
                                formatter:'{value}'
                            }
                        },
                        data:_this.setHours()
                    },
                    yAxis: {
                        type: 'value',
                        name:'数量'
                    },
                    color:['#2d8cf0','#19be6b', '#ff9900', '#e46cbb', '#9a66e4','#ed3f14','#CC9900','#9999FF','#996600','#009900','#336666','#666600','#9999CC'],
                    dataZoom:[],
                    series:[]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option,true);

            },
            commonOption:function (id,title,legendArr,yTData,xAxis,timeType) {
                 var _this = this;
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById(id));
                // console.log(myChart)
                var dataZoomOpt;
                var axLabel = {
                    formatter:'{value}'
                };
                if(timeType != "minute"){
                    axLabel = {
                        formatter:function (params) {
                            // console.log(params.value);
                            var val  = params.value;
                            // console.log(params.value.indexOf('30'))
                            return params.value.indexOf('30')>-1? params.value + " ~ " + params.value.split(":")[0] + ":59" :timeType == 'semih'? params.value + " ~ " + params.value.split(":")[0] + ":30":params.value + " ~ " + params.value.split(":")[0] + ":59" ;
                        }
                    };

                }
                if(title=='IP数' || timeType != "minute" || title=='ip消耗' || title=='收益'){
                    dataZoomOpt = [];
                }else{
                    dataZoomOpt = [{
                        startValue: '00:00'
                    }, {
                        type: 'inside'
                    }];

                }
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: title
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985',
                                formatter:function (params) {
                                    return parseFloat(params.value).toFixed(0)
                                }
                            }
                        }
                    },
                    //color:['#2ec770','#1c97f5'],
                    legend: {
                       data:legendArr,
                     },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top:'90px',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        name:'时间',
                        nameLocation:'start',
                        axisLabel: {
                            showMaxLabel: true
                        },
                        axisPointer:{
                            label:axLabel
                        },
                        data:xAxis
                    },
                    yAxis: {
                        type: 'value',
                        name:'数量'
                    },
                    color:['#2d8cf0','#19be6b', '#ff9900', '#e46cbb', '#9a66e4','#ed3f14','#CC9900','#9999FF','#996600','#009900','#336666','#666600','#9999CC'],
                    dataZoom:dataZoomOpt,
                    series:yTData
                };
                 // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option,true);

            }
        }
    </script>

</body>

</html>